/*
  学习目标： 复用组件逻辑的三种方式 - Render Props
  本质： props接收一个函数叫render， render负责渲染内容

  
*/
import React from 'react';

export default function App() {
  return (
    <div>
      <hr />
      <LogMouse
        render={({ mouse, handleMouseMove }) => {
          return (
            <i onMouseMove={handleMouseMove}>
              LoginMouse - i - {mouse.x} -{mouse.y}
            </i>
          );
        }}
      />
      <LogMouse
        render={({ mouse, handleMouseMove }) => {
          return (
            <div>
              <h1>
                LoginMouse - i - {mouse.x} -{mouse.y}
              </h1>
              <button onMouseMove={handleMouseMove}>放我身上</button>
            </div>
          );
        }}
      />
    </div>
  );
}

class LogMouse extends React.Component {
  state = {
    mouse: { x: 0, y: 0 },
  };

  handleMouseMove = (e) => {
    this.setState({
      mouse: {
        x: e.clientX,
        y: e.clientY,
      },
    });
  };

  render() {
    const { mouse } = this.state;
    const result = this.props.render({ mouse, handleMouseMove: this.handleMouseMove });
    return result;
  }
}
